<template>
    <h1>
        管理员页面
        <el-button @click="dialog = true">添加管理员</el-button>
    </h1>
    <!-- 管理员列表 -->
    <el-table :data="adminList" style="width: 100%">
        <el-table-column prop="adminname" label="名字" width="180" />
        <!-- <el-table-column prop="role" label="角色" width="180" /> -->
        <el-table-column prop="role" label="角色" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.role === 1">超管</el-tag>
                <el-tag v-else type="success">管理员</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small">编辑</el-button>
                <el-button size="small" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 管理员列表的分页 -->
    <el-pagination v-model:current-page="current" :page-size="15" layout="prev, pager, next" :total="adminList.length"
        hide-on-single-page />

    <!-- 添加管理员的抽屉组件 -->
    <el-drawer v-model="dialog" title="添加管理员" direction="rtl" class="demo-drawer">
        <div class="demo-drawer__content">
            <el-form :model="form">
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="form.adminname" />
                </el-form-item>
                <el-form-item label="密码" label-width="80px">
                    <el-input v-model="form.password" />
                </el-form-item>
                <el-form-item label="角色身份" label-width="80px">
                    <el-select v-model="form.role" placeholder="请选择角色身份">
                        <el-option label="超管" value="1" />
                        <el-option label="管理员" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="角色权限" label-width="80px">
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" :loading="loading" @click="okitem">确定</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
// import { getAdminList } from '../../api/user'
import { getAdminList } from '@/api/user'
import { ElMessage } from "element-plus"

export default {
    data() {
        return {
            adminList: [],
            current: 1,
            dialog: false,
            form: {
                adminname: "",
                password: "",
                role: "",
                checkedKeys: [],
            }
        }
    },
    async mounted() {
        const res = await getAdminList()

        this.adminList = res.data
        console.log('组件内接收到的: ', res);
    },
    computed: {
        adminListCom() {
            return this.adminList.slice(
                (this.current - 1) * 15,
                this.current * 15
            )
        }
    },
    methods: {
        cancel() {
            // console.log(123);
            this.dialog = false
            this.form = ''
        },
        okitem() {
            // console.log(1234);
            const adminname = this.form.adminname
            const password = this.form.password
            const role = this.form.role

            if (adminname === '' || password === '' || role === '') {
                return ElMessage({
                    message: "用户名或密码或角色身份不能为空",
                    type: "warning",
                });
            }

            const xhr = new XMLHttpRequest()
            xhr.open('post', 'http://localhost:3001/admin/admin/add')
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send(`adminname=${adminname}&password=${password}&role=${role}`)
            xhr.onload = function () {
                const res = JSON.parse(xhr.responseText)
                console.log(res);
                 if (res.code === '200') {
                    alert(res.message)
                } else {
                    alert(res.message)
                }
            }
        }
    }
}
</script>
